<template>
    <div class="tmpl">
        <nav-bar title="购物车"></nav-bar>
        <div class="pay-detail">
            <ul>
                <!-- v-for="(goods,index) 索引为index (0,1,2,3) ; :key="goods.id"
                当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定
                一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触
                发所有元素的渲染。-->
                <li class="p-list" v-for="(goods,index) in cartGoods" :key="goods.id">
                    <mt-switch v-model="goods.isPicked"></mt-switch>
                    <img :src="goods.imgUrl">
                    <div class="pay-calc">
                        <p v-text="goods.title">商品标题</p>
                        <div class="calc">
                            <span>￥{{goods.sellPrice}}</span>
                            <span @click="minus(index)">-</span>
                            <span>{{goods.num}}</span>
                            <span @click="add(index)">+</span>
                            <a href="javascript:" @click="del(index)">删除</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="show-price">
            <div class="show-1">
                <p>总计(不含运费):</p>
                <span>已经选择商品{{payment.totalNum}}件，总价￥{{payment.totalPrice}}元</span>
            </div>
            <div class="show-2">
                <mt-button type="danger" size="large">去结算</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
    import prodTools from '../common/prodTools';
    //通知底部变更数据
    import connect from '../common/connect.js';
    import Mint from 'mint-ui';

    export default {
        name: "shopcart",
        data() {
            return {
                //也会将对象的子属性继续做defineProperty
                //作为一个对象属性被Object.definePeoperty(obj,'cartGoods',{
                // set:function(){
                //  当obj.cartGoods=xxx的时候触发
                // })
                cartGoods: [],
            }
        },
        created() {
            let prods = prodTools.getProds();
            if (Object.keys(prods).length === 0) {
                return;
            }
            let goodsIds = Object.keys(prods);
            this.$ajax.post('goods/findGoodsByIds', goodsIds)
            //get 请求
            // this.$ajax.get('goods/findGoodsByIds/' + goodsIds)
                .then(res => {
                    this.cartGoods = res.data.message;
                    this.cartGoods.forEach((ele) => {
                        //在VUE中添加属性,是没有办法做到响应 setter
                        // ele.num = prods[ele.id];
                        // ele.isPicked = true;

                        //添加属性一定要用this.$set,
                        this.$set(ele, 'num', prods[ele.id]);
                        this.$set(ele, 'isPicked', true);

                    });
                })
                .catch(err => {
                    console.log(err)
                })
        },
        methods: {
            add(i) {
                //参数传入对象id
                // this.cartGoods.forEach((ele)=>{
                //     if(ele.id === i){
                //         ele.num++;
                //         // this.cartGoods[i].num++;
                //         connect.$emit('addShopCart', 1);
                //         //调用工具对象添加商品
                //         prodTools.addOrUpdate({
                //             id: ele.id,
                //             num: 1
                //         })
                //     }
                // })

                //参数传入index索引
                if (this.cartGoods[i].num < this.cartGoods[i].stockQuantity) {
                    this.cartGoods[i].num++;
                    //通知底部购物车
                    connect.$emit('addShopCart', 1);
                    //调用工具对象添加商品
                    prodTools.addOrUpdate({
                        id: this.cartGoods[i].id,
                        num: 1
                    })
                } else {
                    Mint.MessageBox.alert('该商品库存只有' + this.cartGoods[i].stockQuantity, '提示');
                }
            },
            minus(i) {
                if (this.cartGoods[i].num <= 1) {
                    return;
                }

                this.cartGoods[i].num--;
                //通知底部购物车
                connect.$emit('addShopCart', -1);
                //调用工具对象添加商品
                prodTools.addOrUpdate({
                    id: this.cartGoods[i].id,
                    num: -1
                })
            },

            del(i) {
                let goods = this.cartGoods[i];
                //删除storage,通知底部购物车,删除内存
                prodTools.delete(goods.id);
                connect.$emit('addShopCart', -(goods.num));
                this.cartGoods.splice(i, 1);
            }
        },
        computed: {
            payment() {
                let totalNum = 0;
                let totalPrice = 0.0;
                // 1:如果商品没有被选中,遍历数组中那些商品有被选中,如果有计算金额
                //计算总金额
                this.cartGoods.forEach((ele) => {
                    if (ele.isPicked) {
                        totalNum += ele.num;
                        totalPrice += ele.sellPrice * ele.num;
                    }
                });
                return {
                    totalNum: totalNum,
                    totalPrice: totalPrice
                }
            }
        }
    }
</script>

<style scoped>
    .pay-detail ul li {
        list-style: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        margin-bottom: 3px;
    }

    .pay-detail ul {
        padding-left: 5px;
        margin-top: 5px;
    }

    .pay-detail ul li img {
        width: 80px;
        height: 80px;
        display: inline-block;
        vertical-align: top;
        margin-top: 10px;
    }

    .pay-detail ul li > :nth-child(1),
    .pay-detail ul li > :nth-child(3) {
        display: inline-block;
    }

    .pay-calc p {
        display: inline-block;
        width: 250px;
        overflow: hidden;
        color: blue;
        font-size: 15px;
        margin-bottom: 10px;
    }

    .pay-detail ul li > :nth-child(1) {
        line-height: 80px;
    }

    .calc:nth-child(1) {
        color: red;
        font-size: 20px;
    }

    .calc span:not(:nth-child(1)) {
        border: 1px solid rgba(0, 0, 0, 0.3);
        display: inline-block;
        width: 20px;
        text-align: center;
    }

    .calc a {
        margin-left: 20px;
    }

    .show-1,
    .show-2 {
        display: inline-block;
    }

    .show-1,
    .show-2 {
        margin-left: 30px;
    }

    .show-price {
        background-color: rgba(0, 0, 0, 0.2);
    }
</style>